<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <template v-for="item in amountList" :key="item.amount">
        <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6">
          <count-card v-bind="item"></count-card>
        </el-col>
      </template>
    </el-row>

    <!-- 中间部分的图表 -->
    <el-row :gutter="10">
      <el-col :span="7">
        <chart-card>
          <div class="echart" ref="echartRef">
            <pie-chart :pie-data="showGoodsCategoryCount"></pie-chart>
          </div>
        </chart-card>
      </el-col>
      <el-col :span="10">
        <chart-card>
          <div class="echart" ref="echartRef">
            <map-chart :map-data="showGoodsAddressSale"></map-chart>
          </div>
        </chart-card>
      </el-col>
      <el-col :span="7">
        <chart-card>
          <rose-chart :rose-data="showGoodsCategoryCount"></rose-chart>
        </chart-card>
      </el-col>
    </el-row>

    <!-- 底部部分的图表 -->
    <el-row :gutter="10">
      <el-col :span="12">
        <chart-card
          ><line-chart
            :labels="showGoodsCategorySale.labels"
            :values="showGoodsCategorySale.values"
        /></chart-card>
      </el-col>
      <el-col :span="12">
        <chart-card><bar-chart v-bind="showGoodsCategoryFavor"></bar-chart></chart-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import useAnalysisStore from '@/store/main/analysis/analysis'
import CountCard from './c-cpns/count-card/count-card.vue'
import { storeToRefs } from 'pinia'
import ChartCard from './c-cpns/chart-card/chart-card.vue'
import { PieChart, LineChart, BarChart, RoseChart, MapChart } from '@/components/page-echarts/index'
import { computed } from 'vue'

// 请求数据
const analysisStore = useAnalysisStore()
analysisStore.fetchAnalysisDataAction()

// 获取数据
const { amountList, goodsCategoryCount, goodsCategorySale, goodsCategoryFavor, goodsAddressSale } =
  storeToRefs(analysisStore)

// 处理数据
const showGoodsCategoryCount = computed(() => {
  return goodsCategoryCount.value.map((item) => ({
    name: item.name,
    value: item.goodsCount
  }))
})

const showGoodsCategorySale = computed(() => {
  const labels = goodsCategorySale.value.map((item) => item.name)
  const values = goodsCategorySale.value.map((item) => item.goodsCount)
  return { labels, values }
})

const showGoodsCategoryFavor = computed(() => {
  const labels = goodsCategoryFavor.value.map((item) => item.name)
  const values = goodsCategoryFavor.value.map((item) => item.goodsFavor)
  return { labels, values }
})

const showGoodsAddressSale = computed(() => {
  return goodsAddressSale.value.map((item) => ({
    name: item.address,
    value: item.count
  }))
})
// console.log(amountList)
</script>

<style lang="less" scoped>
.dashboard {
}
.el-row {
  margin-bottom: 10px;
}
</style>
